<html>
<head>
<style type="text/css">
	.smallText{font-size: 12px}
	.box{background-color: #F97; width: 50%; border-collapse: collapse;}
	.box th{text-align: center; border: 1px solid #333}
	.box td{border: 1px solid #333}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.messages.js"></script>
<script type="text/javascript">
	var parameters = {};
	$(function(){
		var txt = 'title=Messages JQuery Plugin\n' +
				  'author=Created By <em>{author}</em>';
		var obj = {greetings : 'Hello {name}', test: 'this is a \{test\}'};
		var fn = function(){
			return 'helloWorld=Hello World';
		}
		$.loadMessages([txt, obj, fn]);
		$('h1').message({useId:true, params: {author: 'Manuel Rascioni'}});
		console.log($.message('helloWorld'));
		console.log($.message({key : 'test', params : {test : 'TEST'}}));
		changeLabel();
		showLabels();
	});
	function changeLabel(){
		$('.greetings').message({key: 'greetings', params : {name: $('#name').val()}});
	}
	function addLabel(){
		var o ={};
		o[$('#key').val()] = $('#value').val();
		$.loadMessages(o);
		showLabels();
		return false;
	}
	function addParameter(){
		parameters[$('#pKey').val()] = $('#pValue').val();
		showLabels();
		return false;
	}
	function showLabels(){
		$('#labels,#keys').empty();
		var labels = $.message();
		for (var key in labels){
			$('#labels').append('<li>'+key+'='+labels[key]+'</li>');
			$('#keys').append('<option value="'+key+'">'+labels[key]+'</option>');
		}
		$('#parameters').empty();
		for (var key in parameters){
			$('#parameters').append('<li>'+key+'='+parameters[key]+'</li>');
		}
	}
	function printMessage(){
		alert($.message({key: $('#keys option:selected').val(), params: parameters}))
	}
</script>
</head>
<body>
<h1 id="title"></h1>
<div class="text">
Loads all the label in the way you prefer:
<pre>
	var txt = 'title=Messages JQuery Plugin\n' +
			  'author=Created By &lt;em&gt;{author}&lt;/em&gt;';
	var obj = {greetings : 'Hello {name}', test: 'this is a \{test\}'};
	var fn = function(){
		return 'helloWorld=Hello World';
	}
	$.loadMessages([txt, obj, fn]);
</pre>
Then replace in the objects you need in a simple way:
<pre>
	$('h1').message({useId:true, params: {author: 'Manuel Rascioni'}});
</pre>
For a full explanation see the <a href="http://code.google.com/p/message-jquery-plugin/">plugin page</a> in google code.
</div>
<h1 id="author" class="smallText"></h1>
<hr/>
<h2 class="greetings"></h2>
<br/>
<input id="name" value="World!!!" /><input type="button" value="Ok" onclick="changeLabel()" />
<pre>
$('.greetings').message({key: 'greetings', params : {name: $('#name').val()}});
</pre>
<hr/>
<p>Try to add your label and parameters and print it!</p>
<div>Add your label:</div>
<form onsubmit="return addLabel()">
<div>
	<label for="key">Key:</label><input id="key" value="" /> - <label for="value">Value:</label><input id="value" value="" />
	<input type="submit" value="Add" />
</div>
</form>
<table class="box">
	<tr>
		<th>
			<h3>Labels:</h3>
		</th>
		<th>
			<h3>Parameters:</h3>
		</th>
	</tr>
	<tr>
	<tr>
		<td>
			<ul id="labels">
			</ul>
		</td>
		<td>
			<ul id="parameters">
			</ul>
		</td>
	</tr>
</table>
<div>Add your parameters:</div>
<form onsubmit="return addParameter()">
<div>
	<label for="pKey">Key:</label><input id="pKey" value="" /> - <label for="pValue">Value:</label><input id="pValue" value="" />
	<input type="submit" value="Add" />
</div>
</form>
<div>
<label for="code">Key to print:</label><select id="keys"></select><input type="button" value="alert!" onclick="printMessage()"/>
</div>
</body>
</html>